import React from 'react';
import styles from "./style.less";
import {message,Form,Input,Row,Col,Button,Icon,Spin} from 'antd';

const FormItem = Form.Item;
import logo from 'images/logo.jpg';
import API,{LOGIN} from 'lib/api';

class Login extends React.Component {
    constructor(props) {
        super(props);
    }


    state = {
        spinning:false
    }

    componentDidMount() {


    }


    handleSubmit(e){
        e.preventDefault();

        let _this = this;

        this.props.form.validateFields((err, fieldsValue) => {
            if (err) {
                return;
            }
            this.setSpinning();

            API.fetch(LOGIN,fieldsValue,resp =>{
                window.location.href = "/";
            },function(err){
                message.error(err.m)
                _this.setSpinning();
            })

        });
    }

    setSpinning(){
        const {spinning} = this.state;

        this.setState({
            spinning:!spinning
        })
    }


    render() {


        const {getFieldDecorator} = this.props.form;



        return (
            <div className="login-div">
                <Spin tip="登录中" spinning={this.state.spinning}>
                    <div className="login-form">
                        <div className="logo">
                            <span>后台管理</span>
                        </div>

                        <Form onSubmit={this.handleSubmit.bind(this)} >
                            <FormItem hasFeedback>
                                {getFieldDecorator('name', {
                                    rules: [{ required: true, message: '请输入您的账号!' }],
                                })(
                                    <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="账号" />
                                )}
                            </FormItem>
                            <FormItem hasFeedback>
                                {getFieldDecorator('pass', {
                                    rules: [{ required: true, message: '请输入您的密码!' }],
                                })(
                                    <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="密码" />
                                )}
                            </FormItem>
                            <FormItem>

                                <Button type="primary" htmlType="submit" className="login-form-button">
                                    登录
                                </Button>
                            </FormItem>
                        </Form>
                    </div>
                </Spin>
            </div>
        )

    }
}


export default Form.create()(Login);
